import Vue from 'vue'
import VueRouter from 'vue-router'
// 直接import某一个文件夹 会 自动引入文件夹中的index 文件
// import Login from '../components/Login'
// @表示src目录
import Login from '@/components/Login.vue'
import Home from '@/components/Home.vue'
import Welcome from '@/components/Welcome.vue'
Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/login' },
  { path: '/login', name: 'login', component: Login },
  {
    path: '/home', name: 'home',redirect:'/welcome' , component: Home, children: [
      { path: '/welcome', component: Welcome },
      { path:'/users', name:'users', component:()=> import('@/components/Users.vue')  },
      { path:'/roles', name:'roles', component:()=> import('@/components/Roles.vue')  }
    ]
  }
]

const router = new VueRouter({
  routes
})

// 添加 路由 的 导航守卫
// 导航守卫和axios的请求拦截器 有什么区别吗？？
// 导航守卫用来控制处理 页面跳转( 不管编程式还是声明式 )
// axios的请求拦截器只是拦截axios发起的请求( axios发起的接口请求 )
router.beforeEach((to, from, next) => {
  // 判断用户访问的是不是login
  // 如果是login 放行直接让它进入下一个页面并终止后续代码
  if (to.path == '/login') {
    return next()
  }
  // 如果不是login页面 要判断是否在本地有token
  let tokenStr = window.sessionStorage.getItem('token')
  // 如果有tokenStr 就是放行 如果没有就让它重定向到 /login
  if (tokenStr) {
    return next()
  } else {
    next('/login')
  }
})

export default router
